<template>
<div>
  <el-popover
    placement="top"
    trigger="hover"
    v-model="visible"
    @show="getCardData">
    <div class="modalCard">
      <div class="header" :style="{background: `url(`  + colorBgc[getLevel] + `)`}">
        <img class="avatar" :src="cardData.avatar_url ? cardData.avatar_url : cardData.sex ===1 ? '../../static/defaultAvatar1.jpeg' : '../../static/defaultAvatar2.jpeg'" alt="">
        <div class="userInfo">
          <p>{{this.cardData.name}}</p>
          <p><i :class="this.cardData.iswork ? 'iconfont icon-briefcase' : 'iconfont icon-shu'"></i>{{this.cardData.iswork ? '已工作' : '在上学' }}</p>
        </div>
      </div>
      <div class="schoolInfo">
        <span><i class="iconfont icon-xueshimao-shi">{{this.cardData.college? this.cardData.college: '学院未知'}}</i></span>
        <span><i class="iconfont icon-shijian"></i>{{this.cardData.graduateAt ? this.cardData.graduateAt + '届毕业' : '别毕业了'}}</span>
        <span><i class="iconfont icon-briefcase-full"></i>{{this.cardData.station ? this.cardData.station : '不知道干啥'}}</span>
      </div>
      <div class="achievement">
        <el-tag size="medium" :color="levelColor[getLevel]" style="color: #fff">Lv.{{getLevel}}</el-tag>
        <el-tag size="medium">获赞{{this.cardData.praise}}</el-tag>
        <el-tag size="medium">粉丝{{this.cardData.fans}}</el-tag>
      </div>
      <div class="buttonGruop" v-if="this.type!==3">
        <el-tag v-if="this.type===1" size="medium" @click="cancelFocus(cardData.id)">已关注</el-tag>
        <el-button v-else @click="addRelation"><i class="iconfont icon-jia"></i>关注</el-button>
        <el-button @click="toChat"><i class="iconfont icon-liaotianxuanzhong1"></i>私信</el-button>
        <el-button @click="toProfile"><i class="iconfont icon-touxiang"></i>个人主页</el-button>
      </div>
      <div v-else>
        <el-button @click="toMyProfile"><i class="iconfont icon-touxiang"></i>个人中心</el-button>
      </div>
  </div>
    <img slot="reference" class="slotImg" :src="avatarUrl ? avatarUrl : sex===1 ? '../../static/defaultAvatar1.jpeg' : '../../static/defaultAvatar2.jpeg'" @click.stop="toProfile" alt="">
  </el-popover>
</div>
</template>

<script>
import level from '../utils/level'
import colorBgc from '../constant/colorBgc.js'
import levelColor from '../constant/levelColor'
export default {
  props: {
    userId: {
      type: Number
    },
    avatarUrl: {
      type: String
    },
    sex: {
      type: Number
    }
  },
  data () {
    return {
      userInfo: {},
      cardData: {
        name: '',
        iswork: false
      },
      visible: false,
      type: 0,
      colorBgc,
      levelColor
    }
  },
  methods: {
    async cancelFocus (id) {
      console.log('click')
      await this.$http.post(`/users/relation/${id}/2`)
      this.type = 0
    },
    async addRelation () {
      await this.$http.post(`/users/relation/${this.userId}/1`)
      window.sessionStorage.getItem('userInfo') && this.queryRelation()
    },
    async getCardData () {
      const {data: res} = await this.$http.get(`/users/${this.userId}`)
      this.cardData = res
      this.queryRelation()
    },
    toProfile () {
      let userInfo = {}
      if (window.sessionStorage.getItem('userInfo')) {
        userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
      }
      if (userInfo.id === this.cardData.id) {
        return this.$router.push('/profile')
      }
      this.$router.push(`/profile/${this.cardData.id}`)
    },
    toChat () {
      this.$router.push({path: '/chat', query: {id: this.cardData.id, name: this.cardData.name}})
    },
    async queryRelation () {
      if (JSON.parse(window.sessionStorage.getItem('userInfo')).id === this.userId) {
        this.type = 3
        return
      }
      const {data: res} = await this.$http.get(`/users/relation/${this.userId}`)
      this.type = res && res[0].type
    },
    toMyProfile () {
      this.$router.push('/profile')
    }
  },
  computed: {
    getLevel () {
      return level(this.cardData.experience).level
    }
  }
}
</script>

<style scoped lang="less">
.userInfo {
  color: #fff;
}
.buttonGruop {
  display: flex;
  justify-content: space-around;
}
.header{
  display: flex;
  background-size: 100% 100%;
  padding: 10px;
  align-items: center;
  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}
.slotImg{
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.el-button{
  height: 26px;
  width: 86px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.el-button i{
  margin-right: 5px;
  font-size: 14px;
}
.schoolInfo{
  padding: 10px 0;
  border-bottom: 1px dashed #e1e1e1;
}
.achievement{
  justify-content: space-between;
  padding: 10px 0;
  .el-tag {
    margin: 0 10px;
  }
}
.header img{
  margin-right: 10px;
}
.header i{
  margin-right: 5px;
}
</style>
